<template>
    <div class="block">
        <el-timeline :reverse="true"
                     style="color: #b7bbbf; font-family: 'Microsoft YaHei UI',sans-serif; line-height: 2.5em; font-size: 0.9em">
            <el-timeline-item :key="index" :timestamp="fmt(new Date(item.time))" placement="top"
                              v-for="(item,index) of slice">
                <el-card>
                    <h4>{{ item.description }}</h4>
                    <p>{{ item.params }}</p>
                    <p>{{getUserInfo() ? getUserInfo().name:''}} committed from {{item.requestRemoteAddress}}</p>
                </el-card>
            </el-timeline-item>
        </el-timeline>
        <div @click="show"
             style="font-family:'Microsoft YaHei UI',serif; color: #777777; width: 400px; border: none; font-size: 3em; font-weight: 200; cursor: pointer; margin-left: 280px;"
             v-if="last">
            .............
        </div>
    </div>
</template>

<script>
import {queryLogs} from "../../../store/admin";
import common from "../../../store/common";
import {getUser} from "../../../store/session";

export default {
    data() {
        return {
            logs: null,
            slice: null,
            last: true, /*是否还剩下*/
            pageNo: 1,
            size: 5,
        }
    },
    methods: {
        /*动态切割*/
        show() {
            if (this.slice.length + this.size > this.logs.length) {
                this.slice = this.logs;
                this.last = false;
            } else {
                this.pageNo = this.pageNo + 1;
                let page = this.pageNo * this.size;
                this.slice = this.logs.slice(-page);
            }
        },
        fmt(date) {
            return common.dateFormat(date);
        },
        getUserInfo() { /*懒得再去找user*/
            return getUser();
        }
    },
    created() {
        queryLogs().then(rs => {
            this.logs = rs;
            if (rs.length > this.size)
                /*负数代表倒数第几个*/
                this.slice = rs.slice(-this.size);
            else {
                this.slice = rs;
                this.last = false;
            }
        })
    }
}
</script>
